<script lang="ts" setup>
import { Search, Refresh } from '@element-plus/icons-vue'
import { HttpStatusCode } from 'axios'
import { ElMessage } from 'element-plus'
import { getDictPage } from '../../api/dict'
import AddForm from './components/AddForm/index.vue'
import DataTable from './components/DataTable/index.vue'
import UpdateForm from './components/UpdateForm/index.vue'

let dictList = ref<ListDict[]>([])
let search_key = ref('')
let updateService = ref<ListDict>()
const pagination = reactive<Page>({})
let loading = ref(false)
const showAddBox = ref(false)
const showEditBox = ref(false)
//子组件方法
const tableRef = ref()
const changeShowAddBox = () => {
  showAddBox.value = !showAddBox.value
}
const changeShowEditBox = (formData: ListDict) => {
  showEditBox.value = !showEditBox.value
  updateService.value = formData
}
const cancelEditBox = () => {
  showEditBox.value = !showEditBox.value
}
const getData = async (page: number, search_key: string) => {
  loading.value = true
  const res = await getDictPage(page, search_key)
  if(res.statusCode === HttpStatusCode.Ok) {
    dictList.value = res.data.data as ListDict[]
    pagination.current = page
    pagination.total = res.data.total
    pagination.pageSize = res.data.pageRow
    loading.value = false
  } else {
    ElMessage({
      message: '获取失败，请重试',
      type: 'error',
    })
  }
}
const searchFun = () => {
  getData(1, search_key.value)
}
const resetFun = () => {
  search_key.value = ''
  getData(1, search_key.value)
}
const handleChange = (val: number) => {
  getData(val, search_key.value);
}
const manyDel = () => {
  tableRef.value.delMany()
}
onMounted(() => {
  getData(1, search_key.value)
})
</script>

<template>
  <div class="header">
    <div class="btn_group">
      <el-button type="primary" class="add_btn" color="#232442" clearable @click="changeShowAddBox">添加</el-button>
      <el-button type="danger" class="add_btn" clearable @click="manyDel">删除</el-button>
    </div>
    <div class="search_group">
      <el-input placeholder="输入名称" v-model="search_key" />
      <el-button class="search_btn" type="primary" :icon="Search" color="#232442" @click="searchFun"></el-button>
      <el-button class="search_btn" type="primary" :icon="Refresh" color="#232442" @click="resetFun"></el-button>
    </div>
  </div>
  <div class="bodyer">
    <DataTable ref="tableRef" :data-list="dictList" :loading="loading" @increase="getData" @update-data="changeShowEditBox" />
    <el-pagination class="page" background layout="prev, pager, next" :total="pagination.total"
                   :current-page="pagination.current"
                   @current-change="handleChange" />
  </div>
  <el-drawer
      v-model="showAddBox"
      title="添加"
      direction="rtl"
  >
    <AddForm @increase="getData" @closeShow="changeShowAddBox" />
  </el-drawer>
  <el-drawer
      v-model="showEditBox"
      title="修改"
      direction="rtl"
  >
    <UpdateForm :data-form="updateService as ListDict" @increase="getData" @closeShow="cancelEditBox" />
  </el-drawer>
</template>

<style lang="less" scoped>
@import '../../styles/baseAdmin.less';
</style>
